<!-- BEGIN ITEM TIMELINE -->
<li class="item-timeline highlight">
	<div class="inner-content">
		
		<!-- BEGIN HEADING TIMELINE -->
		<div class="heading-timeline">
			<a href="/u/{{{$user->user_name}}}">
				{{ HTML::image( $comment->user->avatar_url, $comment->user->user_name, array( 'class' => 'avatar' ) ) }}
			</a>
			<div class="user-timeline-info">
				<p>{{{ $comment->user->user_name }}}<small>{{ $comment->getTimeElapsed() }}</small></p>
			</div>
		</div>
		<!-- END HEADING TIMELINE -->
		
		<p style="word-wrap: break-word;">{{{ $comment->comment }}}</p>
		
		<!-- BEGIN FOOTER TIMELINE -->
		<div class="footer-timeline">
			<ul id="comment-answers-container-{{ $comment->id }}" class="timeline-option">
			
				<li class="option-row">
					<div class="row">
						<div class="col-xs-6">
						<!--<ol>
								<li><a href="#fakelink">Like</a></li>
								<li><a href="#fakelink">Dislike</a></li>
							</ol>-->
						</div>
						<div class="col-xs-6 text-right">
							<ol>
								<li>
									<a href="javascript:likeDislike( {{ $recipe->id }}, {{ $comment->id }}, 1 )"
										style="text-decoration: none !important;">
										<i id="like-icon-{{$comment->id}}" 
											class="@if( in_array( $comment->id, $userLikes ) ) fa fa-thumbs-up
												@else fa fa-thumbs-o-up @endif"></i> 
										<span id="like-{{$comment->id}}">
										{{ 
					                        count( $comment->likesDislikes->filter( function( $likeDislike ){
					                                return $likeDislike->isLike();
					                        } ) )
					                    }}
					                    </span>
	   								</a>
   								</li>
   								<li>
   									<a href="javascript:likeDislike( {{ $recipe->id }}, {{ $comment->id }}, 0 )"
   										style="text-decoration: none !important;">
										<i id="dislike-icon-{{$comment->id}}" 
											class="@if( in_array( $comment->id, $userDislikes ) ) fa fa-thumbs-down
												@else fa fa-thumbs-o-down @endif"></i> 
										<span id="dislike-{{$comment->id}}">
										{{ 
					                        count( $comment->likesDislikes->filter( function( $likeDislike ){
					                                return $likeDislike->isDislike();
					                        } ) ) 
					                    }}
					                    </span>
	   								</a>
   								</li>
								<li>
									<a href="javascript:" style="text-decoration: none !important;">
										<i class="fa fa-comments"></i> 
										<span id="comment-count-{{$comment->id}}">
										{{ count( $comment->answersCount ) > 0 ? $comment->answersCount[0]->count : 0 }}
										</span>
									</a>
								</li>
							</ol>
						</div>
					</div>
				</li>
				
				@if( Auth::user() )
				<li class="option-row answer-text-{{$comment->id}}">
					{{ HTML::image( $user->avatar_url, $user->user_name, array( 'class' => 'avatar' ) ) }}
					<div class="reply">
						<form method="post" action="/comment/insert-answer" onsubmit="return insertAnswer( this );">
							<input name="recipe_id" type="hidden" value="{{$recipe->id}}"/>
							<input name="parent_comment" type="hidden" value="{{$comment->id}}"/>
							<div class="input-group">
								<span class="input-group-addon btn btn-default" onclick="sendAnswer( this );">
						        	@lang( 'recipe.send' )
						      	</span>
						      	<textarea class="form-control input-sm" name="comment"
									placeholder="@lang( 'recipe.answer' ) ..." maxlength="255"
									onkeyup="checkCommentLength( this.value, document.getElementById( 'answer-length-{{$comment->id}}' ) );"
									style="resize: none;"></textarea>
								<span id="answer-length-{{$comment->id}}" class="input-group-addon">10</span>
							</div>
						</form>
					</div><!-- /.reply -->
				</li>
				@endif
				
				@foreach( $comment->answersPagination as $answer )
					@include( 'recipe.answer', array( 'answer' => $answer ) )
				@endforeach
				
				@if( count( $comment->answersCount ) > 0 && 
					$comment->answersCount[0]->count - count( $comment->answersPagination ) > 0 ) 
				<li id="answers-load-button-{{ $comment->id }}" class="option-row text-center">
					<a href="javascript:getAnswers( {{$recipe->id}}, {{$comment->id}} )">
						@choice( 'recipe.loadMoreAnswers',
								 $comment->answersCount[0]->count - count( $comment->answersPagination ),
								 array( 'number' => $comment->answersCount[0]->count - count( $comment->answersPagination ) ) )
					</a>
				</li>
				<li id="answers-loading-{{ $comment->id }}" class="option-row text-center hidden">
					<span class="fa fa-spinner fa-spin"></span> @lang( 'util.loading' )
				</li>
				@endif
			</ul>
		</div>
		<!-- END FOOTER TIMELINE -->
		
	</div>
</li>